<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/booth">展位管理</BreadcrumbItem>
        <BreadcrumbItem>展位详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">展位基本信息</div>
          </div>
          <div class="kui-item-bd">
            <Form class="kui-form-panel" ref="formData" :model="temporaryData" :label-width="90" label-position="left">
              <FormItem label="展位编号：">
                <Input v-model="temporaryData.no" clearable placeholder="请输入"/>
              </FormItem>
              <FormItem label="录入人：">
                <Input v-model="essentialInfor.author" disabled/>
              </FormItem>
              <FormItem label="所属分类：">
                <Select v-model="temporaryData.cate" clearable style="width:294px" placeholder="请选择">
                    <Option v-for="(item, index) of typeOption" :key="index" :value="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
              <FormItem label="所属区域：">
                <Select v-model="temporaryData.area" clearable style="width:294px" placeholder="请选择">
                    <Option v-for="(item, index) of regionOption" :key="index" :value="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
              <FormItem label="展位规格：">
                <Input v-model="temporaryData.spec" clearable placeholder="请输入，例如：2M*2M"/>
              </FormItem>
              <FormItem label="展位地址：">
                <Input v-model="temporaryData.address" clearable placeholder="请输入"/>
              </FormItem>
              <FormItem label="状态标识：">
                <Select v-model="temporaryData.state" clearable style="width:294px" placeholder="请选择">
                    <Option :value="-1">待维修</Option>
                    <Option :value="1">空闲中</Option>
                    <Option :value="2" disabled>使用中</Option>
                    <Option :value="3" disabled>预定中</Option>
                </Select>
              </FormItem>
              <FormItem label="备注信息：">
                <Input v-model="temporaryData.info" type="textarea" placeholder="请输入"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="clickPut()">提交修改</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      essentialInfor: {
        cate: null,
        area: null
      }, //用户数据
      temporaryData: {}, //修改数据临时存放
      regionOption:[], //区域搜索选项
      typeOption: [] //类型搜索选项
     }
   },
   methods: {
     //获取数据
    async getData(id) {
      const app = this
      let { data } = await app.$axios.get(`/master/v1/board/${id}`)
      if( data.code === 100 ) {
        app.essentialInfor = data.result
        app.temporaryData = {
          address: app.essentialInfor.address,
          area: app.essentialInfor.area,
          cate: app.essentialInfor.cate,
          gps: null,
          info: app.essentialInfor.info,
          no: app.essentialInfor.no,
          spec: app.essentialInfor.spec,
          state: app.essentialInfor.state,
        }
      }
    },
        // 获取用户经纬度信息
    async getGps () {
      const app = this
      let { data } = await app.$axios.get('v3/geocode/geo', {
        params: {
          address: app.temporaryData.address,
          key: '925a3b2bc1eb84a46c70b3c097cbc458'
        }
      })
      if (data.count === '1') {
          app.temporaryData.gps = data.geocodes[0].location
          app.putData()
        }else {
          app.$Message.error('地址输入有误！')
        }
    },
    //修改数据
    async putData() {
      const app = this
      let { data } = await app.$axios.put(`/master/v1/board/${app.$route.query.id}`, app.temporaryData)
      if(data.code === 100){
        app.$router.push('/booth')
        app.$Message.success(data.msg)
      }else{
        app.$Modal.warning({
                            title: '警告',
                            content: data.msg,
                            okText:'返回',
                            onOk: () => {
                              app.$router.push({path:'/booth'})
                            }
                        })
      }
    },
    //修改弹窗
    clickPut () {
      const app = this
      app.$Modal.confirm({
        title: '确认修改',
        content: '你正在修改，是否继续？',
        onOk: () => {
          if(app.temporaryData.address !== '') {
            app.getGps()
          }else {
            app.$Message.error('展位地址不能为空！')
          }

        },
        onCancel: () => {
          app.getData(app.$route.query.id)
        }
      })
    },
    //区域搜索选项
    async regionOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'area'}
      })
      if(data.code === 100){
        app.regionOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //类型搜索选项
    async typeOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'cate'}
      })
      if(data.code === 100){
        app.typeOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
   },
   created () {
     this.getData(this.$route.query.id)
     this.regionOptionData()
     this.typeOptionData()

   }
 }
</script>

<style lang="less" scoped>
@range: 24px;
.kui-section-item {
  &+.kui-section-item {
    margin-top: @range !important;
  }
}
.device-management-box {
  .ivu-row {
    .ivu-col {
      font-size: 14px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 2.4;
    }
  }
}
</style>
